<template>
  <el-dialog
    :visible.sync="dialogVisible"
    title="表格操作"
    width="80%"
    :close-on-click-modal="false"
    @close="dialogVisible = false"
  >
    <el-button @click="addColumn(true)" type="danger"
      >添加数据列(用于form操作)
    </el-button>
    <el-button @click="addColumn(false)" type="primary">添加数据列 </el-button>
    <el-table
      :height="'calc(100vh - 300px)'"
      border
      fit
      size="small"
      highlight-current-row
      :data="tableColumns"
    >
      <el-table-column label="字段">
        <template slot-scope="{ row }">
          <el-input
            v-if="row.custom"
            placeholder="输入id"
            v-model="row.key"
          ></el-input>
          <span v-else>{{ row.key }}</span>
        </template>
      </el-table-column>
      <el-table-column label="字段展示">
        <template slot-scope="{ row }">
          <el-input v-model="row.label"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="是否可见" width="80px" align="center">
        <template slot-scope="{ row }">
          <el-checkbox v-if="!row.custom" v-model="row.visible"></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column label="顺序">
        <template slot-scope="{ row }">
          <el-input v-model="row.order"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="能否添加" align="center" width="80px">
        <template slot-scope="{ row }">
          <el-checkbox v-model="row.addable"></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column label="能否编辑" align="center" width="80px">
        <template slot-scope="{ row }">
          <el-checkbox v-model="row.editable"></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column label="能否为空" align="center" width="80px">
        <template slot-scope="{ row }">
          <el-checkbox v-model="row.nullable"></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column label="宽度" align="center" width="100px">
        <template slot-scope="{ row }">
          <el-input
            v-model="row.width"
            placeholder="单位px"
            type="number"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column label="数据类型">
        <template slot-scope="{ row }">
          <el-select v-model="row.type" @change="setupEnum(row)">
            <el-option
              v-for="(op, i) in tableColumnTypes"
              :key="i"
              :label="op"
              :value="op"
            >
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="额外配置" width="400px">
        <template slot-scope="{ row }">
          <template v-if="row.type === '枚举' || row.type === '多枚举'">
            <template v-for="(item, index) in row.ext">
              <div :key="index">
                <el-input
                  v-model="item.value"
                  size="small"
                  placeholder="输入枚举值"
                  style="width: 100px"
                >
                </el-input>
                <el-input
                  v-model="item.label"
                  size="small"
                  placeholder="输入显示内容"
                  style="width: 200px"
                >
                </el-input>
                <el-button
                  type="danger"
                  size="small"
                  @click="onDeleteEnum(row, item)"
                >
                  删除
                </el-button>
              </div>
            </template>
            <el-button @click="onAddEnum(row)">新增一项枚举</el-button>
          </template>
          <template v-else-if="row.type === '自定义计算'">
            <el-input
              v-model="row.ext"
              placeholder="输入计算方式列如:(${object.A / object.B}A和B是字段值)"
            ></el-input>
          </template>
          <template v-else-if="row.type === '视频'">
            <el-input
              v-model="row.ext.thumb"
              placeholder="输入缩略图地址的计算方式(${object}是视频字段值)"
            ></el-input>
            <el-input
              v-model="row.ext.video"
              placeholder="输入缩略图地址的计算方式(${object}是视频字段值)"
            ></el-input>
          </template>
          <template
            v-else-if="row.type === '多张图片' || row.type === '单张图片'"
          >
            <el-input
              v-model="row.ext"
              placeholder="输入图片地址的计算方式(${object}是图片字段值)"
            ></el-input>
          </template>
          <template v-else-if="row.type === '多张图片(非json)'">
            <el-input
              v-model="row.ext"
              placeholder="输入图片地址分隔符(一般是逗号..但是说不定是分号呢?.)"
            ></el-input>
          </template>
          <template v-if="row.custom">
            <el-button type="danger" @click="deleteColumn(row)">删除</el-button>
          </template>
        </template>
      </el-table-column>
      <!-- <el-table-column label="form可见状态" width="200px">
        <template slot-scope="{ row }">
          <template v-if="row.editable || row.addable">
            <el-input v-model="row.visibleFunc" placeholder="用于控制在表单中是否显示(一般是基于类型或者状态之类的, ${formData}用于指代表单)"></el-input>
          </template>
        </template>
      </el-table-column> -->
    </el-table>
    <span slot="footer">
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="onOK">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { deepClone } from '@/utils'

export default {
  name: 'CommonFormDialog',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    value: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      editDialogVis: false,
      operationToEdit: {},
      tableColumns: this.value,
      tableColumnTypes: [
        '字符串',
        'ID',
        '长文本',
        '日期',
        '时间',
        '整数',
        'Boolean',
        '2位小数',
        '4位小数',
        '时分',
        '时分秒',
        '开启服务类型',
        '国家',
        '聊天内容解析',
        '富文本',
        '枚举',
        '多枚举',
        '单张图片',
        '多张图片',
        '多张图片(非json)',
        '单/多张图片(有宽高)',
        '视频',
        '自定义计算',
        '多条目数据'
      ]
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible')
      }
    }
  },
  watch: {
    visible(val) {
      if (val) {
        this.tableColumns = deepClone(this.value)
        this.tableColumns.forEach(row => {
          if (row.type === '枚举') {
            if (!row.ext) {
              row.ext = []
            }
            const enumList = []
            for (const i in row.ext) {
              enumList.push({
                value: i,
                label: row.ext[i]
              })
            }
            row.ext = enumList
          }
        })
      }
    }
  },
  methods: {
    setupEnum(row) {
      if (row.type === '枚举' || row.type === '多枚举') {
        this.$set(row, 'ext', [])
      } else if (row.type === '视频') {
        this.$set(row, 'ext', {
          thumb: '',
          video: ''
        })
      }
    },

    onDeleteEnum(row, item) {
      const index = row.ext.indexOf(item)
      if (index >= 0) {
        row.ext.splice(index, 1)
      }
      this.$set(row, 'ext', row.ext)
    },

    onAddEnum(row) {
      row.ext.push({ value: '', label: '' })
    },

    addColumn(custom) {
      this.tableColumns.push({
        custom: custom,
        key: '',
        label: '',
        visible: false,
        editable: false,
        addable: false,
        nullable: false,
        order: 100,
        ext: null
      })
    },
    deleteColumn(row) {
      const index = this.tableColumns.indexOf(row)
      if (index >= 0) {
        this.tableColumns.splice(index, 1)
      }
    },
    onOK() {
      this.tableColumns.forEach(row => {
        if (row.type === '枚举' || row.type === '多枚举') {
          const result = {}
          row.ext.forEach(item => {
            if (item.value && item.label) {
              if (/^\d+$/.test(item.value)) {
                result[parseInt(item.value)] = item.label
              } else {
                result[item.value] = item.label
              }
            }
          })
          row.ext = result
        }
      })
      this.$emit('success', this.tableColumns)
    }
  }
}
</script>

<style scoped></style>
